<template>
  <div>
    <div class="m_con">
      <div class="cont_logo">
        <i class="iconfont icon-ren">&#xe7ae;</i>
      </div>
      <div class="blank login_font">登录</div>
      <div class="blank">
        <el-input v-model="name" placeholder="用户名或者电子邮件"></el-input>
      </div>
      <div class="blank">
        <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
      </div>
      <div class="chekcon blank">
        <div class="remem">
          <el-checkbox v-model="passchecked">记住密码</el-checkbox>
        </div>
        <div class="reset" @click="gotoReset">重置密码</div>
      </div>
      <div class="blank">
        <a class="login_btn">登录</a>
      </div>
      <div class="conhr"></div>
      <div class="jump">使用您的社交媒体帐户登录。</div>
      <div class="iconcon">
        <a class="dingding"><i class="iconfont icon-ren">&#xe690;</i></a>   
      </div>
      <div class="conhr"></div>
      <div class="jump">还没有帐号？</div>
      <div class="nowregister" @click="clickregister">现在注册</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      name: "",
      password: "",
      passchecked: true
    };
  },
  methods: {
    gotoReset() {
      //跳转到重置密码页面
      // this.$router.replace("/resetpassword");
      this.$router.push({path: '/resetpassword'});
    },
    clickregister (){
      // this.$router.replace("/register")
       this.$router.push({path: '/register'});
    }
  }
};
</script>
<style scoped>
.m_con {
  width: 18%;
  height: 100%;
  margin: 5% auto;
  border: 1px solid #e6e6e6;
  padding: 3%;
  font-size: 2vh;
  position: relative;
}
.blank {
  margin-bottom: 6%;
}
.chekcon {
  height: 30px;
  overflow: hidden;
}
.remem {
  float: left;
}
.reset {
  color: #0a80ff;
  font-size: 1.4vh;
  line-height: 2.5vh;
  float: right;
}
.login_btn {
  background: #0a80ff;
  width: 100%;
  display: block;
  border-radius: 5px;
  height: 34px;
  line-height: 34px;
  font-size: 1.5vh;
  margin: 0 auto;
  color: #fff;
}
.login_btn:hover {
  background: #0069d9;
  color: #fff;
}
.cont_logo {
  position: absolute;
  top: -7%;
  left: 39%;
  background: #fff;
  height: 85px;
  z-index: 99;
  width: 100px;
}
.cont_logo i {
  font-size: 8vh;
}
.login_font {
  margin-top: 9%;
}
.conhr {
  height: 1px;
  width: 100%;
  background: #ccc;
  margin-top: 9%;
}
.jump {
  margin-top: 10%;
  font-size: 1.5vh;
  color: #6c757d;
}
.nowregister{
    border: 1px solid #e6e6e6;
    height: 24px;
    line-height: 24px;
    width: 31%;
    font-size: 1.3vh;
    margin: 0 auto;
    margin-top: 5%
}
.nowregister:hover{
  background: #e6e6e6;
}
.iconcon{
    margin-top: 4%;
}
.iconcon i{
  font-size: 4vh;
}
.dingding{
  background: #0a80ff;
  color: #fff;
  display: inline-block;
  border-radius: 19px;
}
.dingding:hover{
  background: #0069d9;
}
</style>
